<template>
  <el-drawer v-model="showDrawer" :title="title" :size="size" @close="onClose" @opened="onOpenedFn"
    :close-on-click-modal="true" :destroy-on-close="destroyOnClose">
    <template #header>
      <h4>{{ headerText }}</h4>
    </template>


    <div class="formDrawer" v-loading="DrawerLoading">
      <div class="body">
        <slot>
          <LTForm ref="LTFormRef" @submit="submit" v-bind="formConfig" v-model="formData" @resetForm="resetForm" />
        </slot>
      </div>
      <div class="actions">
        <el-button v-if='confirmText' type="primary" @click="drawerSubmit" :loading="loading">{{
    confirmText
  }}</el-button>
        <el-button v-if='cancelText' type="default" @click="close">{{ cancelText }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref } from "vue";
import LTForm from "@/components/base-ui/form";

// const onSubmit
const LTFormRef = ref(null);
const showDrawer = ref(false);

const props = defineProps({
  title: String,
  size: {
    type: String,
    default: "35%"
  },
  destroyOnClose: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: "提交"
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  headerText: {
    type: String,
    default: ""
  },
  isStopCancel: {
    type: Boolean,
    default: false  // true会阻止取消事件，false默认不阻止
  },
  formConfig: {
    type: Object,
    default: () => ({})
  },
  DrawerLoading: {
    type: Boolean,
    default: false
  }
});
// tempalte中使用 直接size ， setup中使用需要添加props.size

// 提交
const emit = defineEmits(["submit", "onClose", "cancelClose", 'onOpened']);
const onClose = () => {
  // LTFormRef.value.resetForm();
  emit("onClose");
  resetForm();

}; //关闭回调
const drawerSubmit = () => {
  if (LTFormRef.value && props.formConfig.formItems) {
    LTFormRef.value.onSubmit();
  } else {
    emit("submit");
  }
};
// 打开的回调
const onOpenedFn = () => emit("onOpened");


const submit = () => {
  emit("submit", formData.value);
};

const loading = ref(false);
const showLoading = () => (loading.value = true);
const hideLoading = () => (loading.value = false);

// 打开
const open = () => (showDrawer.value = true);

// 关闭
const close = () => {
  if (props.isStopCancel && showDrawer.value) {
    return emit("cancelClose");
  }
  showDrawer.value = false
};

const formData = ref({});
const formOriginData = {};

const initForm = () => {
  const formItems = props.formConfig?.formItems ?? [];

  for (const item of formItems) {
    formOriginData[item.field] = item?.default ?? "";
  }
  formData.value = formOriginData;
};

initForm();

const resetForm = () => {
  for (const key in formOriginData) {
    formData.value[`${key}`] = formOriginData[key];
  }
};

// 向父组件暴露以下方法
defineExpose({
  open,
  close,
  showLoading,
  hideLoading,
  initForm
});
</script>
<style>
.formDrawer {
  width: 100%;
  height: 100%;
  position: relative;
  @apply flex flex-col;
}

.formDrawer .body {
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow-y: auto;
}

.formDrawer .actions {
  height: 50px;
  @apply mt-auto flex items-center;
}
</style>
